<template>
  <div class="mat-reference">
    <div v-if="scope == $C.NoteScope.Article && kind == $C.MatKind.Poem">
      <a target="_blank" :href="gushiwen">
        <ri i="elink"></ri>
        古诗文网</a
      >
      <a target="_blank" :href="baiduhanyu">
        <ri i="elink"></ri>
        百度汉语</a
      >
    </div>
    <div v-else-if="scope == $C.NoteScope.Word">
      <a target="_blank" :href="handian">
        <ri i="elink"></ri>
        汉典
      </a>
      <a target="_blank" :href="baidu">
        <ri i="elink"></ri>
        百度
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: ["scope", "kind", "name"],
  computed: {
    gushiwen() {
      let esc = encodeURIComponent(this.name);
      return "https://so.gushiwen.org/search.aspx?value=" + esc;
    },
    baiduhanyu() {
      let esc = encodeURIComponent(this.name);
      return "https://hanyu.baidu.com/s?from=poem&wd=" + esc;
    },
    handian() {
      let url = "https://www.zdic.net/hans/";
      let esc = encodeURIComponent(this.name);
      return url + esc;
    },
    baidu() {
      let url = "https://hanyu.baidu.com/zici/s?wd=";
      let esc = encodeURIComponent(this.name);
      return url + esc;
    },
  },
};
</script>

<style lang="stylus">
.mat-reference
  font-size 0.9em

  >a
    margin-right 20px
    padding 0
    color #409EFF
    text-decoration underline

    .icon-button
      font-size 1em
      margin-top 1px
      padding-top 2px
      margin-left 0
      line-height 22px
      height 22px margin-right 20px
</style>